<template>
  <div>
    <el-select
      v-model="selectLabel"
      :placeholder="placeholder"
      :disabled="disabled"
      remote
      clearable
      default-first-option
      filterable
      :filter-method="filterData"
      :remote-method="hasRemoteMethod?remoteMethod:''"
      :loading="loading"
      @clear="clearData"
      class="filter-item"
      @focus="remoteMethod('')"
      :style="{'width':width}"
    >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column :label="item.label" v-for="(item,index) in selectTableColumnData" :key="index" :width="item.width">
          <template slot-scope="scope">
            <el-option :label="scope.row[selectTableColumnData[0].props]" :value="scope.row[id]">
              <span>{{ scope.row[item.props] }}</span>
            </el-option>
          </template>
        </el-table-column>
      </el-table>
    </el-select>
  </div>
</template>

<script>
import request from '@/utils/request'
// import api from '@/api/modules/EDI/index.js'

export default {
  name: 'ImportShipCntrSelect',
  data() {
    return {
      selectLabel: this.selectDefaultLabel,
      tableData: [],
      tableDataAll: [],
      id: '',
      loading: false
    }
  },
  props: {
    selectDefaultLabel: { // 默认选择选项
      type: [String, Number],
      default: ''
    },
    selectTableColumnData: { // 选择表格表头信息
      type: Array,
      default: () => []
    },
    selectTableData: { // 选择表格内容,不传则需要传url等访问接口获取
      type: Array
    },
    optionKey: { // option的value对应什么key
      type: [String, Number],
      default: ''
    },
    placeholder: { // 默认placeholder
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    method: {
      type: String,
      default: ''
    },
    params: [Object, Array, String], // 接口访问参数结构
    paramsKey: {
      type: String,
      default: ''
    },
    resDataMap: {
      type: String,
      default: '1'
    },
    hasRemoteMethod: {
      type: Boolean,
      default: true
    },
    width: {
      type: [String, Number],
      default: '100%'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    selectDefaultLabel(newV) { // 初始赋值
      this.selectLabel = newV
    },
    selectTableData(newV) { // 初始赋值
      this.tableData = newV
    },
    selectLabel: {
      handler(newV, oldV) {
        console.log(newV, 'newv');
        this.$emit('changeFdata', newV, this.tableData)
        const obj = this.tableDataAll.filter(item => item[this.optionKey] === newV)
        console.log(this.tableDataAll, obj, 'ddd?');
        this.$emit('changeFobj', obj)
      }
      // immediate: true
    },
    optionKey: {
      handler(newV) {
        console.log(newV, 'optionkey');
        this.id = newV
      },
      immediate: true
    },
    hasRemoteMethod(newV) {
      console.log(newV, 'remote');
    }
  },
  mounted() {
    this.$bus.$on('changeIndex', i => {
      this.tableDataAll = []
    })
  },
  methods: {
    /**
     * 获取tableData
     */
    getTableData(query) {
      // 如果未传入tabledata的值，则去根据url去访问
      const params = JSON.parse(JSON.stringify(this.params))
      if (this.hasRemoteMethod) {
        for (const key in params) {
          if (key === this.paramsKey) {
            params[key] = query
          }
        }
      }
      request({
        url: this.url,
        method: this.method,
        params: params
      }).then(res => {
        this.tableData = res.data[0]
        if (this.resDataMap === '1') {
          this.tableData = res.data
        } else if (this.resDataMap === '2') {
          this.tableData = res.data[0]
        }
        this.tableDataAll = this.tableDataAll.length !== 0 ? this.tableDataAll : JSON.parse(JSON.stringify(this.tableData))
        if (this.optionKey === '') {
          this.getOptionKey()
        }
        this.loading = false
      })
    },
    /**
     * 如果外部是遍历的情况，多次引用没有固定的optionKey，则默认给selectTableColumnData[0].props
     */
    getOptionKey() {
      if (this.id === '') {
        this.id = this.selectTableColumnData[0].props
      }
    },
    // 过滤搜索
    filterData(name) {
      console.log('走了');
      const selectTableData = this.selectTableData !== undefined ? this.selectTableData : this.tableDataAll
      if (name !== '') {
        this.tableData = selectTableData.filter(item => {
          return item[this.selectTableColumnData[0].props].indexOf(name) > -1 || item[this.selectTableColumnData[1].props].indexOf(name) > -1
        })
      } else {
        this.tableData = selectTableData
      }
    },
    // 清空搜索
    clearData() {
      const selectTableData = this.selectTableData !== undefined ? this.selectTableData : this.tableDataAll
      this.tableData = selectTableData
    },
    // 远程搜索方法
    remoteMethod(query) {
      if (query !== '') {
        const selectInput = Array.from(document.getElementsByClassName('filter-item'))
        selectInput.forEach(item => {
          item.firstElementChild.firstElementChild.value = item.firstElementChild.firstElementChild.value.toUpperCase()
        })
        this.loading = true;
        this.getTableData(query.toUpperCase())
      } else {
        // 初始为''，如果传入了selectTable直接使用，没传入则为tableDataAll
        const selectTableData = this.selectTableData !== undefined ? this.selectTableData : this.tableDataAll
        // 如果selectTableData为空，则说明未拿到表格数据。
        if (selectTableData.length === 0) {
          this.getTableData(query)
        } else {
          this.tableData = selectTableData
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .miniInput .el-input {
  width: 4.5vw;
}
</style>
